<template>
  <div class="Inspection_appointment">
    <div class="heard_title">检查预约</div>
    <div style="padding: 0 10px">
      <el-cascader
        :options="options_a"
        collapse-tags
        v-model="OrgansArr"
        style="margin-left: 10px"
        :props="{ checkStrictly: true }"
        @change="handleChange"
        clearable
        size="small"
      ></el-cascader>
      <span style="margin-left: 5px">影像科室：</span>
      <el-select v-model="value_ks" placeholder="请选择" size="small">
        <el-option
          v-for="item in options_ks"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button size="small" style="margin-left: 10px" @click="open"
        >预约登记</el-button
      >
      <el-button
        size="small"
        style="margin-left: 10px"
        @click="dialogVisible_zy = true"
        >预约资源管理</el-button
      >
      <el-button size="small" style="margin-left: 10px">同步至第三方</el-button>
    </div>
    <div style="margin-top: 15px">
      <el-table :data="tableData" style="width: 100%" height="600">
        <el-table-column prop="RvNo" label="预约单号"> </el-table-column>
        <el-table-column prop="PatientName" label="患者姓名"> </el-table-column>
        <el-table-column prop="Sex" label="性别"> </el-table-column>
        <el-table-column prop="Age" label="年龄"> </el-table-column>
        <el-table-column prop="BirthDate" label="出生日期">
          <template slot-scope="scope">
            {{ scope.row.BirthDate | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column prop="Dept" label="申请科室"> </el-table-column>
        <el-table-column prop="Doctor" label="申请医师"> </el-table-column>
        <el-table-column prop="Modality" label="影像科室"> </el-table-column>
        <el-table-column prop="Device" label="影像设备"> </el-table-column>
        <el-table-column prop="ClinicalImpression" label="检查部位">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" @click="yuyue_edit(scope.row)"
              >修改</el-button
            >
            <el-button size="small" @click="yuyue_DEl(scope.row)"
              >取消</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="text-align: center; margin-top: 15px">
        <el-pagination
          layout="prev, pager, next"
          :total="pages.total"
          :page-size.sync="pages.pagesize"
          :current-page.sync="pages.currentpage"
          @current-change="YYpage_size"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 预约弹层 -->
    <el-dialog
      title="预约登记"
      :visible.sync="dialogVisible_yuyue"
      width="65%"
      :before-close="handleClose_yuyue"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <el-descriptions class="margin-top" title="" :column="3" border>
        <el-descriptions-item>
          <template slot="label"> 患者姓名 </template>
          <el-input v-model="from.PatientName" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 英文名字 </template>
          <el-input v-model="from.PatientNameSpell" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 性别 </template>
          <el-radio-group v-model="from.Sex" size="small">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 出生日期 </template>
          <el-date-picker
            v-model="from.BirthDate"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            @change="getAge"
            style="width: 100%"
          >
          </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 年龄 </template>
          <el-input-number
            v-model="from.Age"
            :min="1"
            :max="120"
            label="请输入年龄"
            size="small"
          ></el-input-number>
          &nbsp;岁
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 联系电话 </template>
          <el-input v-model="from.Telephone" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 门诊号 </template>
          <el-input v-model="from.HISNo" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 住院号 </template>
          <el-input v-model="from.HISNo" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 床号 </template>
          <el-input v-model="from.BedNO" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 申请科室 </template>
          <el-input v-model="from.Dept" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 申请医师 </template>
          <el-input v-model="from.Doctor" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 预约号 </template>
          <el-input v-model="from.RvNo" size="small" disabled></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 预约时间 </template>
          <el-date-picker
            v-model="from.Appointment"
            type="datetime"
            placeholder="选择日期时间"
            size="small"
            style="width: 100%"
          >
          </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 影像科室 </template>
          <el-select v-model="from.Modality" placeholder="请选择" size="small">
            <el-option
              v-for="item in options_ks"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 设备 </template>
          <el-select v-model="from.Device" placeholder="请选择" size="small">
            <el-option
              v-for="item in tableData_zy"
              :key="item.ID"
              :label="item.DeviceName"
              :value="item.DeviceName"
            >
            </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 检查部位 </template>
          <el-input
            v-model="from.CheckItem"
            size="small"
            style="width: 45%; display: inline-block"
          ></el-input>
          <el-select
            v-model="from.j"
            placeholder="请选择"
            size="small"
            style="width: 30%; display: inline-block"
          >
            <el-option
              v-for="item in options_bw"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button
            size="small"
            icon="el-icon-plus"
            @click="BW_ADD"
          ></el-button>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 检查方式 </template>
          <el-select v-model="from.CheckMode" placeholder="请选择" size="small">
            <el-option
              v-for="item in options_jcfs"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 备注 </template>
          <el-input v-model="from.h" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 临床诊断 </template>
          <el-input v-model="from.ClinicalImpression" size="small"></el-input>
        </el-descriptions-item>
      </el-descriptions>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose_yuyue">取 消</el-button>
        <el-button type="primary" @click="dialogVisible_yuyue_butOk"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 预约资源管理弹层 -->
    <el-dialog
      title="资源管理"
      :visible.sync="dialogVisible_zy"
      width="65%"
      :before-close="handleClose_zy"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <div>
        机器名称:
        <el-input
          size="small"
          style="display: inline-block; width: 30%"
        ></el-input>
        <el-button size="small" style="margin-left: 10px" icon="el-icon-search"
          >搜索</el-button
        >
        <el-button
          size="small"
          style="margin-left: 10px"
          icon="el-icon-plus"
          @click="dialogVisible_zyAdd = true"
          >添加</el-button
        >
      </div>
      <div style="margin-top: 15px">
        <el-table :data="tableData_zy" border style="width: 100%" height="350">
          <el-table-column prop="ModalityType" label="设备类型">
          </el-table-column>
          <el-table-column prop="DeviceName" label="设备名称">
          </el-table-column>
          <el-table-column prop="Workload" label="日工作量"> </el-table-column>
          <el-table-column prop="Deptment" label="所在科室"> </el-table-column>
          <el-table-column prop="Fee" label="预设费用"> </el-table-column>
          <el-table-column prop="Status" label="状态"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="SB_DEL(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_zy = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible_zy = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 预约管理添加弹层 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible_zyAdd"
      width="45%"
      :append-to-body="true"
      :close-on-click-modal="false"
      :before-close="handleClose_zyAdd"
    >
      <el-form
        label-position="right"
        label-width="80px"
        :model="formLabelAlign"
      >
        <el-form-item
          label="设备类型"
          style="display: inline-block; width: 50%"
        >
          <el-input v-model="formLabelAlign.ModalityType"></el-input>
        </el-form-item>
        <el-form-item
          label="设备名称"
          style="display: inline-block; width: 50%"
        >
          <el-input v-model="formLabelAlign.DeviceName"></el-input>
        </el-form-item>
        <el-form-item
          label="所在科室"
          style="display: inline-block; width: 50%"
        >
          <el-input v-model="formLabelAlign.Deptment"></el-input>
        </el-form-item>
        <el-form-item
          label="日工作量"
          style="display: inline-block; width: 50%"
        >
          <el-input v-model="formLabelAlign.Workload"></el-input>
        </el-form-item>
        <el-form-item
          label="预设费用"
          style="display: inline-block; width: 50%"
        >
          <el-input v-model="formLabelAlign.Fee"></el-input>
        </el-form-item>
        <el-form-item label="状态" style="display: inline-block; width: 50%">
          <el-input v-model="formLabelAlign.Status"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose_zyAdd">取 消</el-button>
        <el-button type="primary" @click="SB_click">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      options_ks: [
        {
          value: "放射科",
          label: "放射科",
        },
      ],
      options_sb: [
        {
          value: "CT123",
          label: "CT123",
        },
      ],
      options_bw: [
        {
          value: "脑部",
          label: "脑部",
        },
        {
          value: "胸部",
          label: "胸部",
        },
        {
          value: "肺部",
          label: "肺部",
        },
        {
          value: "心部",
          label: "心部",
        },
        {
          value: "腹部",
          label: "腹部",
        },
        {
          value: "四肢",
          label: "四肢",
        },
      ],
      options_jcfs: [
        {
          value: "平扫",
          label: "平扫",
        },
        {
          value: "增强",
          label: "增强",
        },
        {
          value: "平扫+增强",
          label: "平扫+增强",
        },
      ],
      value_ks: "放射科",
      tableData: [],
      tableData_zy: [],
      dialogVisible_yuyue: false,
      dialogVisible_zy: false,
      dialogVisible_zyAdd: false,
      from: {},
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
      OrgansArr: 1034,
      options_a: [],
      pages: {
        currentpage: 1,
        pagesize: 10,
        total: 1,
      },
      GetNo: "",
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    if (this.$route.query.Token != null && this.$route.query.Token != "") {
      console.log(this.$route.query.Token, "KKKKKKKKKKKKKKKKKKKKKK");
      localStorage.setItem("token", this.$route.query.Token);
    } else {
    }
  },
  filters: {
    dateFormat(val) {
      // 时间过滤器
      if (val == null || val == "") {
        return "";
      } else {
        let d = new Date(val); // val 为表格内取到的后台时间
        let month =
          d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
        let times =
          d.getFullYear() +
          "-" +
          month +
          "-" +
          day +
          " " +
          hours +
          ":" +
          min +
          ":" +
          sec;
        return times;
      }
    },
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {
    this.gettree_list();
    this.getTableData();
    this.getSB_table();
  },
  // 组件方法
  methods: {
    handleClose_yuyue() {
      // 预约弹层关闭事件
      this.dialogVisible_yuyue = false;
      this.from = {};
    },
    handleClose_zy() {
      // 资源管理弹层关闭事件
      this.dialogVisible_zy = false;
    },
    handleClose_zyAdd() {
      // 资源管理新增/修改弹层关闭事件
      this.formLabelAlign = {};
      this.dialogVisible_zyAdd = false;
    },
    SB_click() {
      // 设备弹层确定按钮
      this.$post("/rv_Device/Create", this.formLabelAlign).then((res) => {
        if (res.code == 0) {
          this.getSB_table();
          this.dialogVisible_zyAdd = false;
          this.$message({
            message: "操作成功",
            type: "success",
          });
        }
      });
    },
    SB_DEL(val) {
      // 设备删除按钮事件
      this.$get("/rv_Device/Delete/" + val.ID).then((res) => {
        if (res.code == 0) {
          this.getSB_table();
          this.$message({
            message: "操作成功",
            type: "success",
          });
        }
      });
    },
    getSB_table() {
      // 获取设备表格数据
      let body = {
        currentpage: 1,
        pagesize: 90,
      };
      this.$post("/rv_Device/GetListByPage", body).then((res) => {
        if (res.code == 0) {
          this.tableData_zy = res.data;
        }
      });
    },
    gettree_list() {
      // 获取组织数据
      this.$post(baseUrl.hrIp + "/auth/organs/searchlist", {}).then((res) => {
        if (res.code == 1) {
          this.options_a = res.data;
          this.from.HospitalID = res.data[0].value;
        }
      });
    },
    handleChange(value) {
      // 组织点击事件
      this.OrgansArr = value;
      this.from.HospitalID = value;
    },
    dialogVisible_yuyue_butOk() {
      // 预约添加按钮
      var url = this.from.ID ? "/rv_PACS/Modify" : "/rv_PACS/Create";
      let body = this.from;
      this.$post(url, body).then((res) => {
        if (res.code == 0) {
          this.dialogVisible_yuyue = false;
          this.getTableData();
          this.$message({
            message: "操作成功",
            type: "success",
          });
        }
      });
    },
    getTableData() {
      // 获取预约表格数据
      let body = {
        currentpage: this.pages.currentpage,
        pagesize: this.pages.pagesize,
        Condition: "1=1",
      };
      this.$post("/rv_PACS/GetListByCondition", body).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data;
          this.pages.total = res.pageinfo.totalrecords;
        }
      });
    },
    YYpage_size(val) {
      // 预约页面页码切换事件
      this.pages.currentpage = val;
      this.getTableData();
    },
    yuyue_edit(val) {
      // 预约修改
      var info = JSON.stringify(val);
      this.from = JSON.parse(info);
      this.dialogVisible_yuyue = true;
    },
    yuyue_DEl(val) {
      // 预约删除
      this.$get("/rv_PACS/Delete/" + val.ID).then((res) => {
        if (res.code == 0) {
          this.getTableData();
          this.$message({
            message: "操作成功",
            type: "success",
          });
        }
      });
    },
    BW_ADD() {
      // 部位添加按钮
      this.$nextTick(() => {
        if (this.from.CheckItem != undefined || "") {
          this.from.CheckItem = this.from.CheckItem + "/" + this.from.j;
        }
        if (this.from.CheckItem == undefined || "") {
          this.from.CheckItem = this.from.j;
        }
        this.from.j = "";
      });
    },
    getAge(val) {
      // 通过日期计算年龄
      var birthday = val;
      var birthday_time = birthday.split("-");
      var birthYear = birthday_time[0];
      var d = new Date();
      var nowYear = d.getFullYear();
      var age = nowYear - birthYear;
      this.from.Age = age;
    },
    open() {
      // 弹层开启事件
      this.getNo();
    },
    getNo() {
      // 获取预约单号
      this.$get("/CommonInfo/GetNo").then((res) => {
        if (res.code == 0) {
          this.GetNo = res.data;
          this.from.RvNo = this.GetNo;
          this.dialogVisible_yuyue = true;
        }
      });
    },
  },
};
</script>

<style>
</style>
